import React from 'react';
import { inject,observer } from 'mobx-react';
import * as mobx from 'mobx';
import { getAntd,getEcCom,getLabel } from '../../util/convert';
import * as _ from '../../util/public/common';

export default class Main extends React.Component{
    constructor(){
        super();
        this.state = {showAll:false};
    }
    render(){
        const { showAll } = this.state;
        const { isSuccess,title,titlesuffix,operators } = this.props;
        return (
            <div className="wf-confirm-msg">
                <div className="wf-confirm-msg-content">
                    <div className="wf-confirm-msg-title">{title}
                        <span className="wf-confirm-msg-titlesuffix" dangerouslySetInnerHTML={{__html:titlesuffix}}></span>
                    </div>
                    <div className="wf-confirm-msg-operators">
                        <div className="wf-confirm-msg-receiver-title">{getLabel(15525,'接收人')}：</div>
                        <div className="wf-confirm-msg-receiver-users">
                            {
                                isSuccess && operators && operators.map((item,index) =>{
                                    if(index>=20 && !showAll)
                                        return null;
                                    return this.getOperatorObj(item);
                                })
                            }
                            {
                                isSuccess && operators.length>20 && showAll && <i className="icon-coms-up" onClick={this.controlShowAll.bind(this,false)} />
                            }
                            {
                                isSuccess && operators.length>20 && !showAll && <i className="icon-coms-down" onClick={this.controlShowAll.bind(this,true)} />
                            }
                            {
                                !isSuccess && <span className="wf-confirm-msg-user">{titlesuffix}</span>
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    getOperatorObj(item){
        let obj = new Array();
        if(!!item.beagentid){    //存在代理
            obj.push(<a className="wea-hrm-card" href={`javaScript:openhrm(${item.beagentid})`} onClick={event => window.pointerXY(event)}>{item.beagentname}</a>);
            obj.push(<span className="wf-confirm-msg-connect-symbol">-></span>);
        }
        obj.push(<a className="wea-hrm-card" href={`javaScript:openhrm(${item.operatorid})`} onClick={event => window.pointerXY(event)}>{item.operatorname}</a>);
        return <span className="wf-confirm-msg-user">{obj}</span>;
    }
    controlShowAll(bool){
        this.setState({showAll:bool})
    }

}
